File upload
Description
<jp-file-upload>
is a component with functionality of <input type="file">
, but also supports url links.
Attributes
Name | Required | Type | Description |
---|---|---|---|
id | string | unique identifier | |
value | string | setter | |
label | string | label of the input field | |
labelType | 'outside' or 'inside' | whether label is inside or outside of the field | |
service | ✓ | FileService | file service |
name | ✓ | string | name of the form control |
Interfaces
FileService
Defines the accepted file types and provides a method to upload a file.
Properties
Name | Required | Type | Description |
---|---|---|---|
acceptedFiles | ✓ | string | defines acceptable file types |
maxSize | number | max file size in bytes | |
uploadFile | (file: any, id?: string) => Promise<string> | uploads a file and returns a promise which is a string that represents a link to the file location |
Slots
This component does not have any slots.
Methods
This component does not have any methods.
Events
getValue
- returns form field value
value
- triggers when value (file) changes
rejected
- triggers when added file is not accepted because it does not satisfy some service criteria
Demo
Live Editor
// import '@jaspero/web-components/file-upload.wc.js'; // import '@jaspero/web-components/file-upload.css'; <jp-file-upload label="Upload a file"></jp-file-upload>
Result
Loading...